<template>
    <div v-loading="loading" element-loading-text="页面正在初始化" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-if="loading"></div>
    <div v-else>
        <el-container class="device-editor" style="background-color: #fff">
            <el-header class="device-editor__header" style="border-bottom: solid 1px #d3d8da">
                <h3 class="header-title fl">
                    <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/home-fill.svg')" alt="" />
                    {{ deviceName }}
                </h3>
                <div class="flex" style="flex: 1">
                    <div style="margin-right: 186px">
                        <div class="buttonLeftClass" style="margin: 0 8px 0 0" @click="handelClick(19)">
                            <div class="flex-btn">
                                <!--                        <div class="iconClass"><i class="el-icon-download"/></div>-->
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/download.svg')" alt="" />
                                <span>导出</span>
                            </div>
                        </div>
                        <div class="buttonLeftClass" style="margin: 0 8px 0 0" @click="handelClick(18)">
                            <div class="flex-btn">
                                <!--                        <div class="iconClass"><i class="el-icon-upload2"/></div>-->
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/upload.svg')" alt="" />
                                <span>导入</span>
                            </div>
                        </div>
                        <div class="buttonLeftClass" style="margin: 0 8px 0 0" @click="handelClick(6)">
                            <div class="flex-btn">
                                <!--                        <div class="iconClass"><i class="el-icon-picture-outline"/></div>-->
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/image.svg')" alt="" />
                                <span>图库</span>
                            </div>
                        </div>
                        <div class="buttonLeftClass" style="margin: 0 0 0 0" @click="handelClick(8)">
                            <div class="flex-btn">
                                <!--                        <div class="iconClass"><i class="el-icon-paperclip"/></div>-->
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/bind.svg')" alt="" />
                                <span>绑定</span>
                            </div>
                        </div>
                    </div>
                    <div style="margin-right: 80px">
                        <div class="buttonLeftClass" style="margin: 0 16px 0 0" @click="brushClick">
                            <div>
                                <!--                        <div class="iconClass"><i class="el-icon-brush"/></div>-->
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/brush.svg')" alt="" />
                                <div class="textClass"><span>格式刷</span></div>
                            </div>
                        </div>
                        <div class="buttonLeftClass" style="margin: 0 16px 0 0" v-if="isLock" @click="handleLock('解锁')">
                            <div>
                                <!--                        <div class="iconClass"><i class="el-icon-unlock"/></div>-->
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/unlink.svg')" alt="" />
                                <div class="textClass"><span>解锁</span></div>
                            </div>
                        </div>
                        <div class="buttonLeftClass" style="margin: 0 16px 0 0" v-else @click="handleLock('锁定')">
                            <div>
                                <!--                        <div class="iconClass"><i class="el-icon-lock"/></div>-->
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/lock.svg')" alt="" />
                                <div class="textClass"><span>锁定</span></div>
                            </div>
                        </div>
                        <div class="buttonLeftClass" style="margin: 0 16px 0 0" @click="makeUpClick('组合')">
                            <div>
                                <!--                        <div class="iconClass"><i class="el-icon-connection"/></div>-->
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/link.svg')" alt="" />
                                <div class="textClass"><span>组合</span></div>
                            </div>
                        </div>
                        <div class="buttonLeftClass" style="margin: 0 0 0 0" @click="makeUpClick('取消组合')">
                            <div>
                                <!--                        <div class="iconClass"><i class="el-icon-link"/></div>-->
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/unlink.svg')" alt="" />
                                <div class="textClass"><span>拆分</span></div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="buttonLeftClass">
                            <div>
                                <div>
                                    <el-dropdown @command="handleCommand">
                                        <el-button icon="el-icon-refresh" type="text" class="buttonTitle flex-btn">
                                            旋转
                                            <i class="el-icon-arrow-down"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item icon="el-icon-plus" command="顺时针90°">顺时针90°</el-dropdown-item>
                                            <el-dropdown-item icon="el-icon-minus" command="逆时针90°">逆时针90°</el-dropdown-item>
                                            <el-dropdown-item icon="el-icon-d-arrow-left" command="水平镜像">水平镜像</el-dropdown-item>
                                            <el-dropdown-item icon="el-icon-d-arrow-right" command="垂直镜像">垂直镜像</el-dropdown-item>
                                            <el-dropdown-item icon="el-icon-edit" command="自定义角度">自定义角度</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </div>
                        </div>
                        <div class="buttonLeftClass">
                            <div>
                                <el-dropdown @command="handleCommandAlign">
                                    <el-button icon="el-icon-film" type="text" class="buttonTitle flex-btn">
                                        对齐
                                        <i class="el-icon-arrow-down"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item icon="el-icon-arrow-left" command="左对齐">左对齐</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-arrow-right" command="右对齐">右对齐</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-arrow-up" command="上对齐">上对齐</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-arrow-down" command="下对齐">下对齐</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-arrow-down" command="水平等间距">水平等间距</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-arrow-down" command="垂直等间距">垂直等间距</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                        <div class="buttonLeftClass">
                            <el-dropdown @command="handleCommandView">
                                <el-button type="text" class="buttonTitle flex-btn" icon="el-icon-zoom-in">
                                    {{ viewSize }}
                                    <i class="el-icon-arrow-down"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="25">25%</el-dropdown-item>
                                    <el-dropdown-item command="50">50%</el-dropdown-item>
                                    <el-dropdown-item command="75">75%</el-dropdown-item>
                                    <el-dropdown-item command="100">100%</el-dropdown-item>
                                    <el-dropdown-item command="125">125%</el-dropdown-item>
                                    <el-dropdown-item command="150">150%</el-dropdown-item>
                                    <el-dropdown-item command="175">175%</el-dropdown-item>
                                    <el-dropdown-item command="200">200%</el-dropdown-item>
                                    <el-dropdown-item command="自适应">自适应</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </div>

                <div class="flex editor-header__right flex-between" style="width: calc(15.7vw + 37px)">
                    <div>
                        <div class="no-wrap">
                            <el-button size="mini" @click="handelClick(16)" style="height: 24px; padding: 0 12px; line-height: 9px">
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/undo.svg')" alt="" style="width: 12px; height: 12px" />
                            </el-button>
                            <!-- 恢复-->
                            <el-button size="mini" @click="handelClick(17)" style="height: 24px; padding: 0 12px; line-height: 9px">
                                <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/redo.svg')" alt="" style="width: 12px; height: 12px" />
                            </el-button>
                        </div>
                    </div>
                    <div class="no-wrap">
                        <el-button size="small" style="padding: 5px 10px" @click="handelClick(1)">
                            <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/save.svg')" alt="" />
                            保存
                        </el-button>
                        <el-button size="small" style="padding: 5px 10px" @click="handelClick(2)">
                            <img class="editor-icon" :src="require('@/views/zutai/components/topo/images/editor/view.svg')" alt="" />
                            预览
                        </el-button>
                    </div>
                </div>
            </el-header>
            <el-main style="overflow: hidden">
                <div class="topo-editor">
                    <div class="topoToolbox-outer" :style="`width:${left}vw`">
                        <TopoToolbox ref="topoToolbox" class="topoToolbox" />
                        <div class="buttonLeftClass fold-btn left-fold-btn flex-center" @click="leftClick">
                            <div>
                                <div class="iconClass"><i :class="leftIcon" style="font-size: 16px" /></div>
                                <!--                        <div class="textClass"><span>{{ leftSpan }}</span></div>-->
                            </div>
                        </div>
                    </div>
                    <div style="position: relative">
                        <TopoMain ref="topoMain" @menuClick="menuClick" @lockStatus="lockStatus" @recoveryFlagClick="recoveryFlagClick" @revokeFlagClick="revokeFlagClick" class="topoMain" @handelAngel="handelAngel" />
                    </div>

                    <div class="topoProperties-outer" :style="`width:${right}vw`">
                        <div class="buttonRightClass fold-btn right-fold-btn flex-center" @click="rightClick">
                            <div>
                                <div class="iconClass"><i :class="rightIcon" style="font-size: 16px" /></div>
                                <!--                        <div class="textClass"><span>{{ rightSpan }}</span></div>-->
                            </div>
                        </div>
                        <TopoProperties ref="topoProperties" @printData="printData" class="topoProperties" />
                    </div>
                </div>
            </el-main>
        </el-container>
        <el-dialog title="图库" :visible.sync="dialogVisible" width="1100px" :close-on-click-modal="false" append-to-body v-dialogDrag>
            <div class="dialogClass">
                <TopoSelectImage ref="topoSelectImage" />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="selectImageClick">选 择</el-button>
            </span>
        </el-dialog>
        <el-dialog title="设备绑定管理" :visible.sync="deviceBindDialog" :close-on-click-modal="false" append-to-body>
            <DeviceBind ref="deviceBind" />
        </el-dialog>
    </div>
</template>

<script>
import TopoToolbox from '../components/topo/TopoToolbox';
import TopoMain from '../components/topo/TopoMain';
import TopoProperties from '../components/topo/TopoProperties';
import TopoSelectImage from '../components/topo/TopoSelectImage';
import DeviceBind from '../components/deviceBind';
//动作特效
import anime from 'animejs';
import request from '@/utils/request';

export default {
    name: 'TopoEditor',
    components: {
        TopoToolbox,
        TopoMain,
        TopoProperties,
        TopoSelectImage,
        DeviceBind,
    },
    data() {
        return {
            dialogVisible: false,
            isFullFlag: false,
            funText: '全屏',
            deviceName: '',
            time: 3,
            //动态布局
            left: 17,
            center: 67.3,
            right: 15.7,
            leftIcon: 'el-icon-arrow-left',
            leftSpan: '折叠',
            isLeft: true,
            iconLeftStyle: {
                float: 'left',
                padding: '5px',
            },
            rightIcon: 'el-icon-arrow-right',
            rightSpan: '折叠',
            isRight: true,
            iconRightStyle: {
                float: 'right',
                padding: '5px',
            },
            htmlTitle: '云组态',
            baseApi: '/prod-api',
            deviceBindDialog: false,
            loading: false,
            isLock: false,
            isRevoke: false,
            isRecovery: false,
            viewSize: '自适应',
        };
    },
    created() {
        this.deviceName = this.$route.query.deviceName || this.$route.query.pageName;
        console.log('this.$route.query', this.$route.query, this.deviceName);
        /*if (this.$route.query.accessToken) {
          sessionStorage.setItem("Admin-Token-WebTopo", this.$route.query.accessToken);
          this.loading = false;
        } else if (this.$route.query.guid) {
          this.getToken();
        } else {
          this.loading = false;
        }*/
    },
    mounted() {
        // 监听页面全屏
        window.addEventListener('clickFullscreen', (e) => {
            if (screenfull.isFullscreen) {
                this.isFullFlag = true;
            } else {
                this.isFullFlag = false;
            }
        });
        if (localStorage.getItem('viewSize')) {
            let command = localStorage.getItem('viewSize');
            if (command != '自适应') {
                this.viewSize = command + '%';
            } else {
                this.viewSize = '自适应';
            }
            this.$refs.topoMain.handleView(command);
        }
    },
    methods: {
        makeUpClick(command) {
            this.$refs.topoMain.makeUpClick(command);
        },
        //格式化
        brushClick() {
            this.$refs.topoMain.handleBrush();
        },
        handleCommandView(command) {
            if (command != '自适应') {
                this.viewSize = command + '%';
            } else {
                this.viewSize = '自适应';
            }
            this.$refs.topoMain.handleView(command);
            //保存编辑器的缩放大小
            localStorage.setItem('viewSize', command);
        },
        getToken() {
            let url = '/ignoreToken/getTokenByImei';
            let query = {
                ztGuid: this.$route.query.guid,
                token: sessionStorage.getItem('Admin-Token-WebTopo') == 'undefined' ? '' : sessionStorage.getItem('Admin-Token-WebTopo'),
            };
            request({
                url: url,
                method: 'get',
                params: query,
            })
                .then((res) => {
                    // console.log("token获取成功",res.data);
                    sessionStorage.setItem('Admin-Token-WebTopo', res.data);
                    this.loading = false;
                })
                .catch((err) => {
                    // console.log("获取token失败");
                });
        },
        //撤销恢复标志位
        revokeFlagClick(flag) {
            this.isRevoke = flag;
        },
        recoveryFlagClick(flag) {
            this.isRecovery = flag;
        },
        //锁定/解锁
        handleLock(command) {
            this.$refs.topoMain.handleLock(command);
        },
        lockStatus(val) {
            this.isLock = val;
        },
        menuClick(val) {
            // console.log("右键菜单点击了",val);
            if (val == '顺时针90°') {
                this.handelClick(9);
            } else if (val == '逆时针90°') {
                this.handelClick(10);
            } else if (val == '水平镜像') {
                this.handelClick(11);
            } else if (val == '垂直镜像') {
                this.handelClick(12);
            } else if (val == '自定义角度') {
                this.handelClick(15);
            } else if (val == '置顶') {
                this.handelClick(13);
            } else if (val == '置底') {
                this.handelClick(14);
            } else if (val == '预览') {
                this.handelClick(2);
            } else if (val == '保存') {
                this.handelClick(1);
            } else if (val == '图库') {
                this.handelClick(6);
            }
        },
        handleCommandAlign(command) {
            this.$refs.topoMain.alignClick(command);
        },
        handleCommand(command) {
            if (command == '顺时针90°') {
                this.handelClick(9);
            } else if (command == '逆时针90°') {
                this.handelClick(10);
            } else if (command == '水平镜像') {
                this.handelClick(11);
            } else if (command == '垂直镜像') {
                this.handelClick(12);
            } else if (command == '自定义角度') {
                this.handelClick(15);
            }
        },
        printData() {
            this.$refs.topoMain.printData(this.time);
        },
        selectImageClick() {
            let selectImage = this.$refs.topoSelectImage.handleChoice();
            if (selectImage == null) {
                this.$message({
                    message: '请选择图片',
                    type: 'warning',
                });
                return;
            } else {
                //this.dialogVisible=false;
                selectImage.forEach((element) => {
                    this.$refs.topoMain.addImageData(this.baseApi + element.resourceUrl);
                });
                this.$message({
                    message: '添加成功',
                    type: 'success',
                });
                this.$refs.topoSelectImage.clearChoice();
            }
        },
        leftClick() {
            if (this.leftIcon == 'el-icon-arrow-left') {
                this.leftSpan = '展开';
                this.leftIcon = 'el-icon-arrow-right';
                this.left = 0;
            } else {
                this.leftSpan = '折叠';
                this.leftIcon = 'el-icon-arrow-left';
                this.left = 17;
            }
            this.center = 100 - this.left - this.right;
            anime({
                targets: '.topoToolbox',
                width: this.left + 'vw',
                easing: 'easeInOutCirc',
            });
            let that = this;
            anime({
                targets: '.topoMain',
                width: this.center + 'vw',
                easing: 'easeInOutCirc',
                complete: function () {
                    console.log('Animation complete');
                    //初始化刻度尺
                    that.$refs.topoMain.initRuler();
                    if (that.viewSize == '自适应') {
                        that.$refs.topoMain.handleView('自适应');
                    }
                },
            });
        },
        rightClick() {
            if (this.rightIcon == 'el-icon-arrow-right') {
                this.rightSpan = '展开';
                this.rightIcon = 'el-icon-arrow-left';
                anime({
                    targets: '.topoProperties',
                    translateX: 0,
                    width: '0px',
                    easing: 'easeInOutCirc',
                });
                this.right = 0;
            } else {
                this.rightSpan = '折叠';
                this.rightIcon = 'el-icon-arrow-right';
                anime({
                    targets: '.topoProperties',
                    translateX: 0,
                    width: '300px',
                    easing: 'easeInOutCirc',
                });
                this.right = 15.7;
            }
            this.center = 100 - this.left - this.right;
            let that = this;
            anime({
                targets: '.topoMain',
                translateX: 0,
                width: this.center + 'vw',
                easing: 'easeInOutCirc',
                complete: function () {
                    console.log('Animation complete');
                    //初始化刻度尺
                    that.$refs.topoMain.initRuler();
                    if (that.viewSize == '自适应') {
                        that.$refs.topoMain.handleView('自适应');
                    }
                },
            });
        },
        clickFullscreen() {
            let element = document.getElementById('q-app'); //指定全屏区域元素
            if (this.isFullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    this.funText = '全屏';
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                    this.funText = '全屏';
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                    this.funText = '全屏';
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                    this.funText = '全屏';
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                    this.funText = '恢复';
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                    this.funText = '恢复';
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                    this.funText = '恢复';
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                    this.funText = '恢复';
                }
            }
            this.isFullscreen = !this.isFullscreen;
        },
        handelAngel(value) {
            this.$refs.topoProperties.onAngle(value);
        },
        handelClick(index) {
            if (index == 1) {
                //保存
                this.$refs.topoMain.printData(this.time);
            } else if (index == 2) {
                //预览
                this.deviceName = this.$route.query.deviceName;
                this.$refs.topoMain.fullScreen();
            } else if (index == 3) {
                //复制
                this.$refs.topoMain.copyItem();
                this.$refs.topoMain.pasteItem();
            } else if (index == 4) {
                //删除
                this.$refs.topoMain.removeItem();
            } else if (index == 5) {
                //测试
                this.$refs.topoMain.alignClick();
            } else if (index == 6) {
                //图库
                this.dialogVisible = true;
            } else if (index == 7) {
                //全屏
                this.clickFullscreen();
            } else if (index == 8) {
                //设备绑定
                this.deviceBindDialog = true;
            } else if (index == 9) {
                //顺时针旋转
                this.$refs.topoProperties.transform('顺时针旋转');
            } else if (index == 10) {
                //逆时针旋转
                this.$refs.topoProperties.transform('逆时针旋转');
            } else if (index == 11) {
                //水平镜像
                this.$refs.topoProperties.transform('水平镜像');
            } else if (index == 12) {
                //垂直镜像
                this.$refs.topoProperties.transform('垂直镜像');
            } else if (index == 13) {
                //置顶
                this.$refs.topoProperties.stack('置顶');
            } else if (index == 14) {
                //置底
                this.$refs.topoProperties.stack('置底');
            } else if (index == 15) {
                //自定义角度
                this.$prompt('', '自定义旋转角度', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    inputValue: '0',
                    inputErrorMessage: '旋转角度不能为空',
                    inputValidator: (value) => {
                        // 点击按钮时，对文本框里面的值进行验证
                        if (!value) {
                            return '角度不能为空';
                        }
                        if (isNaN(value)) {
                            return '旋转角度必须是数字';
                        }
                    },
                }).then(({ value }) => {
                    this.$refs.topoProperties.transform('自定义角度', value);
                });
            } else if (index == 16) {
                //撤销
                this.$refs.topoMain.revoke();
            } else if (index == 17) {
                //恢复
                this.$refs.topoMain.recovery();
            } else if (index == 18) {
                //导入
                this.$refs.topoMain.handleImport();
            } else if (index == 19) {
                //导出
                this.$refs.topoMain.handleDownLoad();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.device-editor {
    height: 100vh;
    color: #606266;

    .flex {
        display: flex;
    }

    .no-wrap {
        white-space: nowrap;
    }

    img.editor-icon {
        width: 16px;
        height: auto;
        max-height: 17px;
        margin-right: 4px;
        object-fit: contain;
    }

    .editor-header__right {
        align-items: center;
        //padding-right: 20px;
        .el-button {
            img {
                vertical-align: -4px;
            }
        }
    }

    .flex-btn {
        display: flex;
        border-radius: 4px;
        padding: 5px;
        background: #f5f7fa;
        line-height: 18px;
        img.editor-icon {
            width: 16px;
            height: auto;
            max-height: 17px;
            margin-right: 4px;
        }
    }

    .device-editor__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-title {
        width: calc(17vw - 20px);
        line-height: 20px;
        font-size: 18px;
        color: #303133;

        .editor-icon {
            width: 24px;
            max-height: 30px;
            vertical-align: -6px;
        }
    }
}

.topo-editor {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    overflow: hidden;

    .topoToolbox-outer,
    .topoProperties-outer {
        position: relative;
        transform: all 0.5s;
        .fold-btn {
            position: absolute;
            top: 50%;
            z-index: 3;
            width: 24px;
            height: 48px;
            z-index: 1000;
            margin: 0;
            background-color: #fff;
            &.left-fold-btn {
                right: 0;
                transform: translate(100%, -50%);
            }
            &.right-fold-btn {
                left: 0;
                transform: translate(-100%, -50%);
            }
        }
    }
}

.topoMain {
    width: 67.3vw;
}

.topoProperties {
    position: fixed;
    top: 60px;
    right: 0px;
    width: 15.7vw;
    z-index: 999;
    .topo-properties-table {
        box-sizing: border-box;
        padding: 0 1em;
    }
}

.topo-editor .el-card__body,
.el-main {
    padding: 0px;
}

.dialogClass {
    height: 550px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.buttonLeftClass {
    float: left;
    font-size: 13px;
    font-weight: 500;
    margin-left: 10px;
    color: #606266;
    text-align: center;
    margin-right: 10px;
}

.buttonLeftClass :hover {
    cursor: pointer;
    color: #409eff;
}

.buttonTitle {
    color: #606266;
    font-size: 12px;
    font-weight: 500;
    .el-icon-arrow-down {
        color: #92959b;
    }
}

.buttonRightClass {
    float: right;
    font-size: 13px;
    margin-left: 15px;
    color: #606266;
    font-weight: 500;
}

.buttonRightClass :hover {
    cursor: pointer;
    color: #409eff;
}

.topoToolbox {
    width: 17vw;
    //height: calc(100vh - 70px);
    height: 100%;
}

.iconClass {
    font-size: 21px;
}

.textClass {
    //margin-top: -5px;
}
</style>
